<template>
  <div class="my-authentication">
    <!-- 顶部导航栏 -->
    <!-- <van-nav-bar
         left-text="授权与协议"
         left-arrow
      /> -->

    <div class="header">
      <div class="header_my"
           @click="btn">&lt;&nbsp; 授权与协议</div>
      <div class="header_portrait">
        <div class="header_portrait_img">
          <img class="img"
               :src="imgter"
               alt="" />
        </div>
        <div class="header_portrait_login">{{name}}</div>
      </div>
    </div>

    <!-- 中间内容区域 -->
    <div class="content">
      <p class="conten_p">
        湖南家政平台在此特别提醒您（家服员、家政员）在阅读前，请认真阅读本
        《授权协议（以下简称“协议”）请您谨慎阅读并选择接受或者不接受本协议。本协议由湖南家政平台根据国家政策实时更新，更新后协议条款一旦公布即代替原来的协议条款，恕不另行通知。
      </p>
      <span>一、本人自愿申请建立家庭服务员信用记录</span>
      <p class="conten_p">
        本人自愿加入湖南家政平台，湖南家政平台可以使用本人身份信息、肖像信息、家庭服务信息和职业信息；身份信息
        包含但不限于身份证号码，姓名，性别，民族，家庭住址，健康状况，教育水平等；职业信息包含但不限于从业经历，
        培训情况、培训考核情况、消费者评价和投诉情况等；
      </p>
      <span>二、本人承诺：</span>
      <p class="conten_p">
        本人自愿加入湖南家政平台，湖南家政平台可以使用本人身份信息、肖像信息、家庭服务信息和职业信息；身份信息
        包含但不限于身份证号码，姓名，性别，民族，家庭住址，健康状况，教育水平等；职业信息包含但不限于从业经历，
        培训情况、培训考核情况、消费者评价和投诉情况等；
      </p>
      <p class="conten_p">
        请点击：我也已阅读并同意以上协议“按钮，代表您同意本协议的全部内容，并授权您在诚信平台的所有资料都可以
        向消费者显示。
      </p>
    </div>
    <!-- 提交按钮 -->
    <mt-button size="large"
               type="primary"
               @click="btn">我已阅读并同意以上协议</mt-button>
  </div>
</template>
<script>
import { setItem, getItem } from '@/mock/wsm.js'
export default {
  name: 'MyAuthentication',
  components: {},
  props: {},
  data () {
    return {
      imgter: '',
      name: ''
    }
  },
  computed: {},
  watch: {},
  created () {
    this.userinfo()
  },
  mounted () { },
  methods: {
    userinfo () {
      const data = getItem('userinfo')
      console.log(data.avatar)
      this.imgter = data.avatar
      this.name = data.name
    },
    btn () {
      // 点击跳转至上次浏览页面
      // this.$router.go(-1)
      // 指定跳转地址
      this.$router.replace('/')
    }
  }
}
</script>

<style lang="less" scoped>
.my-authentication {
  position: relative;
  margin: 0;
  padding: 0;
  background-color: #f8f8f8;
  padding-top: -20px;
  z-index: 99999999;

  .mint-header {
    position: relative;
    height: 520px;
    background-color: #1196db;
  }

  // .van-nav-bar {
  //   height: 500px;
  //   background-color: #3F51B5;

  //   /deep/.van-nav-bar__text {
  //     color: #fff !important;
  //   }

  //   /deep/.van-icon {
  //     color: #fff !important;
  //   }

  //   /deep/.van-nav-bar__left {
  //     font-size: 35px;
  //     // margin-top: -350px;
  //     height: 90px;
  //   }

  //   /deep/.van-nav-bar__right {
  //     height: 1px;
  //   }

  //   .nav-img {
  //     width: 200px;
  //     height: 200px;
  //     background-color: #fff;
  //   }
  // }

  // 头部
  .header {
    height: 430px;
    background-color: #1196db;
    color: #fff;
    position: relative;
    .header_my {
      position: absolute;
      top: 35px;
      left: 35px;
      font-size: 30px;
      font-weight: 700;
    }
    .header_portrait {
      position: absolute;
      display: table-cell;
      text-align: center;
      vertical-align: middle;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .header_portrait_img {
        width: 140px;
        height: 140px;
        background-color: #fff;
        border-radius: 50%;
        margin-bottom: 30px;
        .img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .header_portrait_login {
        font-size: 26px;
        font-weight: 700;
      }
      .header_portrait_login:hover {
        color: #a1afc9;
      }
    }
  }
  // 头部结束

  .content {
    // padding-top: 300px;
    // z-index: 99999;
    width: 650px;
    background-color: #ffffff;
    margin-left: 28px;
    border-radius: 1%;
    padding: 20px;

    span {
      font-size: 30px;
    }

    .conten_p {
      text-indent: 2em;
      font-size: 24px;
    }
  }

  .mint-button {
    height: 80px;
    background-color: #1196db;
    // margin-bottom: 140px;
  }

  .mint-tabbar {
    // display:none;
    opacity: 0;
    // 清除定位
    position: static;
  }
}
</style>
